<template>
<!--  饼图-->
 <div ref="chart" style="width:100%;height:250px"></div>



</template>

<script>
export default {
  name: "bar",
  props:{
    inFor:{
      type:Array,
      default() {
        return [];
      }
    },
    URL:{
      type:Number,
      default() {
        return null;
      }
    }
  },
  created() {
    this.setI2 = setInterval(this.getEchartData,1500)
  },
  beforeDestroy() {
    clearInterval(this.setI1)
    clearInterval(this.setI2)
  },
  data(){
   return{
     setI1:"",
     setI2:"",
   }
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle:{
              color: "white"
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '17',
              color:'white',
              formatter:'{c}\n{b}'
            }
          },
          series: [
            {
              name: '考勤',
              type: 'pie',
              radius: ['30%', '40%'],
              center: ['30%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '15',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },

              data: [
                { value: this.inFor[this.URL].normal, name: '正常' },
                { value: this.inFor[this.URL].askForLeave, name: '缺勤' },

              ],
              color:["#00FFFF","yellow"]
            },
            {
              name: '任务',
              type: 'pie',
              radius: ['30%', '40%'],
              center: ['70%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.inFor[this.URL].finish, name: '完成' },
                { value: 100-this.inFor[this.URL].finish, name: '未完成' },

              ],
              color:["#00FFFF","yellow"]
            }
          ]
        };

        myChart.setOption(option);
        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>

</style>
